<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			html,body{
				/* height: 100%; */
				/* height: 2000px; */
				font-size: 32px;
			}
			.box{
				/* width: 50%; */
				width: 33vw;
				/* height: 200px; */
				/* height: 50%; */
				height: 50vh;
				background: palegreen;
				text-align: center;
				/* font-size: 14px; */
				font-size: 1rem;
			}
		</style>
	</head>
	<body>
		
		<!-- 
		
			px => 像素
			vw => 将浏览器可视区域宽度等分程成100份 1vw = 1份
			vh => 将浏览器可视区域高度等分程成100份 1vh = 1份
			
			在自己上面没有更高一级的节点，自己这个节点就叫根节点
			
			em => 不推荐  rem与px的转换是根据父节点默认的字体大小决定的
			rem => 推荐   默认情况下 1rem = 16px rem与px的转换是根据根节点默认的字体大小决定的
			
			flex 弹性盒子 => 一个元素如果是flex布局 display:flex的话,这个元素的浮动失效
			(PC端尽可能少用，移动端随意用)
			http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
			
		-->
		
		<!-- <div style="width: 800px; height: 200px; border: 10px solid paleturquoise;"> -->
			<!-- <div class="box">小菜狗，绿啊绿啊</div> -->
		<!--
		
		<style>
			
			.test{
			}
			
			.container{
				display: flex;
				/* align-items: center; */垂直居中
				justify-content: space-around;
				/* justify-content: space-between; */
				/* justify-content: flex-start; */
				/* justify-content: flex-end; */
				/* flex-wrap: wrap; */
				/* flex-wrap: wrap-reverse; */
				/* flex-direction: column; */
				width: 100%;
				border: 10px solid palegreen;
				height: 600px;
			}
			.container>div{
				/* width: 200px; */
				width: 30%;
				height: 200px;
			}
			.box1{
				/* flex: 1; */
				background: red;
			}
			.box2{
				/* flex: 2; */
				/* flex: 1; */
				background: palevioletred;
			}
			.box3{
				/* flex: 1; */
				background: mediumpurple;
			}
			.box4{
				/* flex: 1; */
				background: paleturquoise;
			}
			.box5{
				/* flex: 1; */
				background: powderblue;
			}
			.test-container{
				width: 600px;
				height: 300px;
				border: 10px solid purple;
				/* position: relative; */
				/* 
					css 水平垂直居中(至少要会3种及以上)
					https://blog.csdn.net/freshlover/article/details/11579669
				 
				*/ 
				display: flex;
				justify-content: center;  /* 水平居中 */
				align-items: center; /* 垂直居中 */
			}
			.test{
				width: 200px;
				height: 200px;
				background: deepskyblue;
				position: absolute;
				/* top: 50%; */
				/* left: 50%; */
				/* transform: translate(-50%, -50%); */
			}
		</style>
		<div class="container">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
			<div class="box5"></div>
		</div>
		
		<div class="test-container">
			<div class="test"></div>
		</div>
		
	</body>
</html>
 